import React, { Component } from 'react'
import { Icon, Button, Table, Switch, Form, Input, Modal } from 'antd'

const FormItem = Form.Item;


const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  { title: 'Address', dataIndex: 'address', key: 'address' },
  { title: 'Action', dataIndex: '', key: 'x', render: () => <a href="#">Delete</a> },
];

const data = [
  { key: 1, name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.' },
  { key: 2, name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' },
  { key: 3, name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.' },
];






export class Manager extends Component {

  constructor(props) {
    super(props)
    this.state = {
      visible: false,
      loading: false
    }
  }
  showModal() {
    this.setState({
      visible: true,
    });
  }
  handleOk() {
    this.setState({ loading: true });
    setTimeout(() => {
      this.setState({ loading: false, visible: false });
    }, 3000);
  }
  handleCancel() {
    this.setState({ visible: false });
  }
  render() {

    const managerForm = Form.create()
      // const { getFieldDecorator }=managerForm.form
    console.log(Form.create())
    return (
      <div id="answers">
          <div className="message wrap">
          <h2><Icon type="exclamation-circle-o" />这里可以管理每个活动的相关问题</h2>
          </div>
          <div className="container-manager wrap">
            <div className="add-columns">
            <HorizontalLoginForm showModal={this.showModal.bind(this)} />
            </div>
            <div className="show-columns">
          
                <Table
                  columns={columns}
                  expandedRowRender={record => <p>{record.description}</p>}
                  dataSource={data}
                  className="table"
                />
            </div>
            
          </div>
            <Modal
          visible={this.state.visible}
          title="Title"
          onOk={this.handleOk.bind(this)}
          onCancel={this.handleCancel.bind(this)}
          footer={[
            <Button key="back" type="ghost" size="large" onClick={this.handleCancel.bind(this)}>Return</Button>,
            <Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk.bind(this)}>
              Submit
            </Button>,
          ]}
        > 


        </Modal>
      </div>

    )
  }
}








const HorizontalLoginForm = Form.create()(React.createClass({
  handleSubmit(e) {
    e.preventDefault();

    this.props.form.validateFields((err, values) => {
      if (err) {
        return;
      }
      this.props.showModal()
      console.log(this.props)

      console.log('Received values of form: ', values);
    });
  },
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form inline onSubmit={this.handleSubmit}>
        <FormItem wrapperCol={{ span: 24, offset: 0 }} className="question-add-input">
          {getFieldDecorator('question', {
            rules: [{ required: true, message: '一定要输入一个名称哦' }],
          })(
            <Input addonBefore={<Icon type="plus" />} placeholder="请输入一个问题" />
          )}
        </FormItem>
        
        <FormItem  wrapperCol={{ span: 46, offset: 2 }}>
          <Button type="primary" htmlType="submit"> 添加一个问题</Button>
        </FormItem>
      </Form>
    );
  },
}));




export default Manager
